import React, { useState, useEffect } from 'react';
import { Input, Button, Form, Card, Typography, Alert, Space, Switch, Divider } from 'antd';
import { SaveOutlined, ApiOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { ollamaService } from '../services/ollamaService';

const { Title, Text, Paragraph } = Typography;

export default function SettingsPage() {
  const [form] = Form.useForm();
  const [saved, setSaved] = useState(false);
  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
  const [testing, setTesting] = useState(false);
  const [debugInfo, setDebugInfo] = useState<string | null>(null);
  const [useProxy, setUseProxy] = useState(false);

  useEffect(() => {
    // Load current settings
    form.setFieldsValue({
      baseUrl: ollamaService.getBaseUrl()
    });
    setUseProxy(ollamaService.getUseProxy());
  }, [form]);

  const handleSave = async (values: { baseUrl: string }) => {
    try {
      const { baseUrl } = values;
      ollamaService.setBaseUrl(baseUrl);
      ollamaService.setUseProxy(useProxy);
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch (err) {
      console.error('Error saving settings:', err);
    }
  };

  const handleProxyChange = (checked: boolean) => {
    setUseProxy(checked);
  };

  const testConnection = async () => {
    setTesting(true);
    setTestResult(null);
    setDebugInfo(null);
    try {
      const baseUrl = form.getFieldValue('baseUrl');
      // Temporarily set the URL and proxy for testing
      const originalUrl = ollamaService.getBaseUrl();
      const originalProxy = ollamaService.getUseProxy();
      ollamaService.setBaseUrl(baseUrl);
      ollamaService.setUseProxy(useProxy);
      
      const debugOutput: string[] = [];
      debugOutput.push(`正在测试连接: ${baseUrl}`);
      debugOutput.push(`代理模式: ${useProxy ? '启用' : '禁用'}`);
      debugOutput.push(`有效URL: ${ollamaService.getEffectiveUrl()}`);
      
      // 首先测试服务器是否可用
      try {
        debugOutput.push('发送基本请求检查服务器是否在线...');
        const response = await fetch(ollamaService.getEffectiveUrl(), { 
          method: 'GET',
          headers: { 'Accept': 'application/json' }
        });
        debugOutput.push(`服务器响应状态: ${response.status}`);
      } catch (e) {
        debugOutput.push(`基本连接请求失败: ${e instanceof Error ? e.message : String(e)}`);
      }
      
      // 获取模型
      try {
        debugOutput.push('尝试获取模型列表...');
        const models = await ollamaService.getModels();
        debugOutput.push(`成功获取模型列表，发现 ${models.length} 个模型`);
        models.forEach(model => {
          debugOutput.push(`- ${model.name}`);
        });
        
        setTestResult({
          success: true,
          message: `连接成功！找到 ${models.length} 个模型。`
        });
      } catch (err) {
        debugOutput.push(`获取模型失败: ${err instanceof Error ? err.message : String(err)}`);
        setTestResult({
          success: false,
          message: '连接失败。请检查您的Ollama服务器是否正在运行，以及URL是否正确。'
        });
      }
      
      setDebugInfo(debugOutput.join('\n'));
      
      // Restore the original URL and proxy if not saved
      if (!saved) {
        ollamaService.setBaseUrl(originalUrl);
        ollamaService.setUseProxy(originalProxy);
      }
    } catch (err) {
      setTestResult({
        success: false,
        message: '连接测试失败。请检查控制台获取更多信息。'
      });
    } finally {
      setTesting(false);
    }
  };

  return (
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <Title level={2}>设置</Title>
      
      <Card title="Ollama 服务器配置" style={{ marginBottom: 24 }}>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
          initialValues={{ baseUrl: ollamaService.getBaseUrl() }}
        >
          <Form.Item
            label="Ollama 服务器 URL"
            name="baseUrl"
            rules={[{ required: true, message: '请输入Ollama服务器URL' }]}
            extra="Ollama服务器的URL。如果在Docker中运行，请确保URL可以从浏览器访问"
          >
            <Input 
              placeholder="http://localhost:11434" 
              prefix={<ApiOutlined />} 
            />
          </Form.Item>
          
          <Form.Item
            label="使用代理（解决CORS问题）"
            extra="如果遇到跨域问题，请启用此选项。这将通过开发服务器代理您的请求"
          >
            <Switch 
              checked={useProxy}
              onChange={handleProxyChange}
            /> {useProxy ? '启用' : '禁用'}
          </Form.Item>
          
          <Paragraph>
            <Text type="secondary">
              提示：如果Ollama运行在Docker容器中，您可能需要使用以下URL格式之一：
            </Text>
            <ul>
              <li><Text code>http://localhost:11434</Text> - 如果容器端口映射到主机</li>
              <li><Text code>http://[容器IP地址]:11434</Text> - 使用容器的IP地址</li>
              <li><Text code>http://host.docker.internal:11434</Text> - 从容器内访问主机</li>
            </ul>
          </Paragraph>
          
          <Form.Item>
            <Space>
              <Button 
                type="primary" 
                htmlType="submit" 
                icon={<SaveOutlined />}
              >
                保存设置
              </Button>
              <Button 
                onClick={testConnection} 
                loading={testing}
                icon={<InfoCircleOutlined />}
              >
                测试连接
              </Button>
            </Space>
          </Form.Item>
          
          {saved && (
            <Alert 
              message="设置保存成功" 
              type="success" 
              showIcon 
              style={{ marginBottom: 16 }} 
            />
          )}
          
          {testResult && (
            <Alert 
              message={testResult.success ? "连接测试成功" : "连接测试失败"} 
              description={testResult.message}
              type={testResult.success ? "success" : "error"} 
              showIcon 
              style={{ marginBottom: 16 }}
            />
          )}
          
          {debugInfo && (
            <div style={{ marginTop: 16 }}>
              <Divider>调试信息</Divider>
              <pre style={{ 
                background: '#f5f5f5', 
                padding: 16, 
                borderRadius: 4,
                maxHeight: 300,
                overflow: 'auto',
                fontSize: '12px'
              }}>
                {debugInfo}
              </pre>
            </div>
          )}
        </Form>
      </Card>
      
      <Card title="关于">
        <Paragraph>
          这是一个用于Ollama模型的AI聊天界面。连接到您的Ollama服务器与各种AI模型聊天。
        </Paragraph>
        <Paragraph>
          <Text strong>使用方法：</Text>
          <ul>
            <li>确保您的系统上安装并运行了Ollama</li>
            <li>在设置中设置正确的服务器URL（默认：http://localhost:11434）</li>
            <li>如果遇到跨域问题，请启用代理选项</li>
            <li>转到"聊天"页面开始与您的模型聊天</li>
            <li>在"模型"页面查看可用模型</li>
          </ul>
        </Paragraph>
        
        <Paragraph>
          <Text strong>Docker中运行Ollama的注意事项：</Text>
          <ul>
            <li>确保Docker容器的11434端口已映射到主机</li>
            <li>如果使用容器IP，需要确保浏览器可以访问该IP</li>
            <li>如果遇到CORS问题，请启用代理选项或在Ollama服务器上配置CORS</li>
          </ul>
        </Paragraph>
      </Card>
    </div>
  );
} 